<template>
  <a-modal
      :footer="null"
      :maskClosable="false"
      :title="title"
      :visible="visible"
      :width="720"
      @cancel="handleCancel"
  >
    <a-descriptions :column="2" label-class-name="desc-label">
      <a-descriptions-item label="商户单号">
        <a-tag size="small">{{ detailData.merchantTransferId }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="转账单号">
        <a-tag color="orange" size="small">{{ detailData.transferNo }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="应用编号">{{ detailData.appId }}</a-descriptions-item>
      <a-descriptions-item label="转账状态">
        <a-tag v-if="detailData.status" :color="Status[detailData.status].color">
          {{ Status[detailData.status].name }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="转账金额">
        <a-tag color="green" size="small">{{ detailData.price | price }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="转账时间">
        <span v-if="detailData.successTime">{{ detailData.successTime | moment }}</span>
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ detailData.creationTime | moment }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider/>
    <a-descriptions :column="2" label-class-name="desc-label">
      <a-descriptions-item label="收款人姓名">{{ detailData.userName }}</a-descriptions-item>
      <a-descriptions-item label="收款人账号">{{ detailData.userAccount }}</a-descriptions-item>
      <a-descriptions-item label="支付渠道">
        <a-tag v-if="detailData.channelCode">{{ PayChannelCode[detailData.channelCode].name }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="支付 IP">{{ detailData.userIp }}</a-descriptions-item>
      <a-descriptions-item label="渠道单号">
        <a-tag v-if="detailData.channelTransferNo" color="green" size="small">
          {{ detailData.channelTransferNo }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="通知 URL">{{ detailData.notifyUrl }}</a-descriptions-item>
    </a-descriptions>
    <a-divider/>
    <a-descriptions :column="1" bordered label-class-name="desc-label" layout="vertical">
      <a-descriptions-item label="转账渠道通知内容">
        <div style="white-space: pre-wrap; word-break: break-word">
          {{ detailData.channelNotifyData }}
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script>
import * as TransferApi from '@/api/pay/transfer'
import StatusEnum from "@/common/enum/pay/PayTransferStatusEnum";
import PayChannelCodeEnum from "@/common/enum/pay/PayChannelCodeEnum";

export default {
  name: 'PayTransferDetail',
  data() {
    return {
      // 对话框标题
      title: '转账单详情',
      // modal(对话框)是否可见
      visible: false,
      detailData: {}
    }
  },
  computed: {
    Status() {
      return StatusEnum
    },
    PayChannelCode() {
      return PayChannelCodeEnum
    }
  },
  methods: {
    /**
     * 打开弹窗并加载转账单详情
     * @param {number} id 转账单ID
     */
    async open(id) {
      try {
        // 获取转账详情
        this.detailData = await TransferApi.detail(id)
        this.visible = true
      } catch (e) {
        this.$message.error('加载转账单详情失败，请稍后再试')
      }
    },
    // 关闭对话框事件
    handleCancel() {
      this.visible = false
    },
  }
}
</script>